<template>
  <div class="index" v-show="$store.state.finisheAjax">
      <input v-model="inptVal" type="text">
      <button @click="add">添加</button>
      <ul class="tab-lists">
          <li @click="tabChange(0)"  :class="currentTabIndex === 0 ? 'tab-actived' : ''">全部</li>
          <li @click="tabChange(1)"  :class="currentTabIndex === 1 ? 'tab-actived' : ''">未完成</li>
          <li @click="tabChange(2)"  :class="currentTabIndex === 2 ? 'tab-actived' : ''">已完成</li>
      </ul>
        <ul class="todo-lists" v-if="todoList.length>0">
            <li class="todo-lists-item" v-for="item in todoList" :key="item.id">
                <p @click="handleFinished(item.id)" :class="item.finished ? 'item-finished' : ''">{{item.val}}</p>
                <button @click="handleDelete(item.id)">删除</button>
            </li>
        </ul>
      <p v-else>
          没有更多
      </p>
  </div>
</template>

<script>
export default {
    data() {
        return {
            inptVal: '',
            currentTabIndex: 0
        }
    },
    computed: {
       todoList() {
           if(this.currentTabIndex === 0) {
               return this.$store.state.todoLists
           }else if(this.currentTabIndex === 1) {
               return this.$store.state.todoLists.filter(item => {
                   return !item.finished
               });
           }else {
               return this.$store.state.todoLists.filter(item => {
                   return item.finished
               })
           }
       } 
    },
    methods: {
        add() {
            this.$store.commit('ADD',{
                val: this.inptVal,
                finished: false,
                id: new Date().getTime()
            })
            this.inptVal  = ''
        },
        tabChange(index) {
            this.currentTabIndex = index
        },
        handleFinished(id) {
            let arr = JSON.parse(JSON.stringify(this.$store.state.todoLists))
            let index = arr.findIndex(item => {
                return item.id === id
            })
            arr[index].finished = !arr[index].finished
            this.$store.commit('REPLACE', arr)
        },
        handleDelete(id) {
            let arr = JSON.parse(JSON.stringify(this.$store.state.todoLists))
            let index = arr.findIndex(item => {
                return item.id === id
            })
            arr.splice(index, 1)
            this.$store.commit('REPLACE', arr)
        }
    },
    created() {
        this.$store.commit('CHANGESTATUS', true)
        if(!localStorage.getItem('todoLists')){
            this.$store.dispatch('getLists')
            return true;
        } 
    }
}
</script>
<style>
.index {
    width: 320px;
    margin: 0 auto;
}
.tab-lists {
    display: flex;
}
.tab-actived {
    border-bottom: 1px solid #000;
}
ul, li {
    list-style: none;
}
.todo-lists {
    display: flex;
    flex-direction: column;
}
.todo-lists-item {
    display: inline-flex;
}
.item-finished {
    text-decoration: line-through;
}
</style>